<template>
  <div>
    <el-button type="primary" size="mini" :disabled="disabled" @click="addRule"
      >添加下拉选项</el-button
    >
    <div class="optionItem" v-for="(item, index) in value" :key="index">
      <el-input
        size="small"
        placeholder="输入值"
        v-model="value[index].value"
        @input="handleRuleChange(index)"
      />
      <el-input
        size="small"
        placeholder="输入标签"
        v-model="value[index].label"
      />
      <i
        class="el-icon-circle-plus"
        v-if="!value[index].confirmed"
        @click="confirmOption(index)"
      />
      <i class="el-icon-delete-solid" v-else @click="removeRule(index)" />
    </div>
  </div>
</template>

<script>
export default {
  name: "OptionsController",
  props: {
    value: {
      type: Array,
      required: true,
    },
    field: {
      type: String,
      required: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    disabled() {
      return this.value.some((item) => !item.confirmed);
    },
  },
  methods: {
    addRule() {
      this.value.push({
        confirmed: false,
        value: "",
        label: "",
      });
    },
    handleRuleChange(index) {
      this.value[index].confirmed = false;
    },
    confirmOption(index) {
      this.value[index].confirmed = true;
    },
    removeRule(index) {
      this.value.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.optionItem {
  display: flex;
  align-items: center;
  & > *:not(:last-child) {
      margin-right: 8px;
  }
}
</style>